<template>
  <el-dialog
    v-model="dialogVisible"
    title="黑卡充值"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="recharge-form"
    >
      <el-form-item label="充值类型" prop="recharge_type">
        <el-radio-group v-model="form.recharge_type" disabled>
          <el-radio label="personal">个人</el-radio>
          <el-radio label="organization">机构</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="form.recharge_type === 'organization'"
        label="所属机构"
        prop="org_id"
      >
        <el-input v-model="orgName" disabled />
      </el-form-item>

      <el-form-item label="黑卡卡号" prop="black_card_no">
        <el-input v-model="form.black_card_no" disabled />
      </el-form-item>

      <el-form-item label="充值金额" prop="amount">
        <el-input-number
          v-model="form.amount"
          :min="0.01"
          :precision="2"
          :step="100"
          placeholder="请输入充值金额"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="支付方式" prop="payment_method">
        <el-radio-group v-model="form.payment_method">
          <el-radio label="bank">对公转账</el-radio>
          <el-radio label="other">其他</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="付款账号" prop="payment_account">
        <el-input
          v-model="form.payment_account"
          placeholder="请输入付款账号"
        />
      </el-form-item>

      <el-form-item label="付款银行" prop="payment_bank">
        <el-input
          v-model="form.payment_bank"
          placeholder="请输入付款银行"
        />
      </el-form-item>

      <el-form-item label="付款时间" prop="payment_time">
        <el-date-picker
          v-model="form.payment_time"
          type="datetime"
          placeholder="请选择付款时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          rows="3"
          placeholder="请输入备注信息"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  cardInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible', 'success'])

// 表单ref
const formRef = ref(null)

// 弹窗显示控制
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

// 加载状态
const loading = ref(false)

// 机构名称
const orgName = ref('')

// 表单数据
const form = reactive({
  recharge_type: 'personal',
  org_id: '',
  black_card_no: '',
  amount: '',
  payment_method: 'bank',
  payment_account: '',
  payment_bank: '',
  payment_time: '',
  remark: ''
})

// 表单校验规则
const rules = {
  amount: [
    { required: true, message: '请输入充值金额', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '充值金额必须大于0', trigger: 'blur' }
  ],
  payment_method: [
    { required: true, message: '请选择支付方式', trigger: 'change' }
  ],
  payment_account: [
    { required: true, message: '请输入付款账号', trigger: 'blur' }
  ],
  payment_bank: [
    { required: true, message: '请输入付款银行', trigger: 'blur' }
  ],
  payment_time: [
    { required: true, message: '请选择付款时间', trigger: 'change' }
  ]
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    loading.value = true
    const res = await request.post('/black-card/recharge/create', {
      recharge_type: form.recharge_type,
      org_id: form.org_id,
      black_card_no: form.black_card_no,
      amount: form.amount,
      payment_method: form.payment_method,
      payment_account: form.payment_account,
      payment_bank: form.payment_bank,
      payment_time: form.payment_time,
      remark: form.remark
    })
    ElMessage.success('提交成功')
    emit('success')
  } catch (error) {
    console.error('提交失败：', error)
    if (error.message) {
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}

// 关闭弹窗
const handleClose = () => {
  formRef.value?.resetFields()
  Object.keys(form).forEach(key => {
    form[key] = ''
  })
  form.recharge_type = 'personal'
  form.payment_method = 'bank'
}

// 监听卡片信息变化
watch(() => props.cardInfo, (val) => {
  if (val) {
    form.black_card_no = val.card_no
    form.recharge_type = val.card_type
    if (val.card_type === 'organization') {
      form.org_id = val.org_id
      orgName.value = val.org_name || '-'
    }
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.recharge-form {
  padding: 20px;
}

:deep(.el-form-item) {
  margin-bottom: 22px;
}

:deep(.el-input),
:deep(.el-input-number) {
  width: 100%;
}

.dialog-footer {
  text-align: right;
}
</style> 